<template>
  <!-- 显示层级路径 -->
  <tm-text
    _class="text-weight-b m-b-3"
    :font-size="32"
    :label="hierarchy.join('>')"
  ></tm-text>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits } from 'vue'

const props = defineProps<{
  currentLevel: string
  isReturnClicked: boolean
}>()

const emit = defineEmits<{
  (e: 'update:hierarchy', newHierarchy: string[]): void
  (e: 'reset-return-clicked'): void
}>()

const hierarchy = ref<string[]>(['数据'])

watch(
  () => props.currentLevel,
  newLevel => {
    if (newLevel) {
      hierarchy.value.push(newLevel)
      emit('update:hierarchy', hierarchy.value)
    }
  }
)

watch(
  () => props.isReturnClicked,
  newValue => {
    if (newValue) {
      // 移除最后一个层级
      if (hierarchy.value.length > 0) {
        hierarchy.value.pop()
        emit('update:hierarchy', hierarchy.value)
      }
      emit('reset-return-clicked')
    }
  }
)
</script>
